<template>
	<view class="">
		<view class="content u-skeleton">
			<!-- head搜索区域 -->
			<view class="head">
				<view class="search ">
					<image src="../../static/icon/address2.png" class="u-skeleton-circle"></image>
					<image src="../../static/logo/white.png" class="u-skeleton-circle"></image>
					<view class="search_input u-skeleton-fillet">
						<u-search :disabled="true" shape="square" action-text=" " bg-color='#fff'
							:input-style="{fontSize:'20rpx'}">
						</u-search>
					</view>
					<image src="../../static/icon/dp.png" class="dp u-skeleton-circle"></image>
				</view>
				<view class="cate">
					<view class="catenavtab u-skeleton-rect">
						<u-tabs ref="tabs" :list="catenav" lineWidth="20" lineHeight="3" lineColor="#ffffff"
							:activeStyle="{
								        color: '#ffffff',
								        fontWeight: 'bold'
								}" :inactiveStyle="{
								        color: '#ffffff'
								}" bg-color="111" font-size="28" inactive-color='white'
							keyName="catename" :current="currentnav" @change="changecurrent"></u-tabs>
					</view>
					<view class="category u-skeleton-rect">
						<image src="../../static/icon/cate.png"></image>
						<text>分类</text>
					</view>
				</view>
			</view>

			<!-- swiper区域  使用插件实现-->
			<view class="u-skeleton-fillet swiper_banner">
				<u-swiper :list="bannerlist" keyName="img" previousMargin="30" nextMargin="30" :effect3d="true"
					:circular="true" height="150" @click="goActive"></u-swiper>
			</view>
			<!-- 快速导航区域 -->
			<view class="quicknav">
				<view class="row" v-for="(item,index) in quicknav" :key='index' hover-class="touchOpacity">
					<image :src="item.src" class="u-skeleton-circle"></image>
					<text class="u-skeleton-rect">{{item.text}}</text>
				</view>
			</view>

			<!-- 秒杀商品推荐区域 -->
			<view class="seckill">
				<!-- 秒杀左侧区域 -->
				<view class="leftseckill u-skeleton-rect">
					<view class="title " hover-class="touchOpacity">
						<text>限时秒杀</text>
						<text>查看更多 > </text>
					</view>
					<view class="left_seckill_info">
						<u-count-down bg-color="#5D7E37" color="white" ref="uCountDown" timestamp="128989"
							:autoplay="true" font-size="20" height="30"></u-count-down>
					</view>
					<image src="../../static/img/pic/commodity/01.png" mode="widthFix" class="seckill_img"></image>
				</view>
				<!-- 秒杀右侧区域 -->
				<view class="rightseckill">
					<view class="top u-skeleton-rect">
						<view>品牌上新</view>
						<view>9点整，抢大牌</view>
						<view hover-class="touchOpacity">疯抢红包 > </view>
					</view>
					<view class="bottom u-skeleton-rect">
						<view>日用好物</view>
						<view>愿君多采撷</view>
						<view hover-class="touchOpacity">塞满奖券 > </view>
					</view>
				</view>
			</view>

			<!-- 推荐商品区域 -->
			<view class="tuijian  u-skeleton-rect">
				<!-- 标题区域 -->
				<view class="tuijian_title">
					<text :class="tjActiveIndex == 0 ? 'tuijian_active' : '' ">双十一尖货预购</text>
					<text :class="tjActiveIndex == 1 ? 'tuijian_active' : '' ">畅购全球</text>
				</view>
				<!-- 滚动商品区域 -->
				<scroll-view scroll-x class="tuijian_scroll_x">
					<view class="tuijian_scroll_x_row" v-for="(item,index) in tuijianshop" :key="index"
						hover-class="touchOpacity">
						<image :src="item"></image>
					</view>
				</scroll-view>
			</view>

			<!-- 推荐商品区域 -->
			<view class="recommendgood">
				<!-- 推荐导航 -->
				<view class="recommendnav  u-skeleton-fillet">
					<u-subsection :bold="bold" :activeColor="activeColor" :current="current" :mode="mode"
						:list="['热门推荐', '上新推荐', '所有商品']" @change="currentChange"></u-subsection>
				</view>
				<view class="recommendlist">
					<view class="recommendrow u-skeleton-rect" v-for="(item,index) in shoplist[goodsIndex].content"
						:key="index">
						<view class="image">
							<u-image :key="index" :src="item.img" width="200rpx" mode="widthFix"></u-image>
						</view>

						<view class="recommendrowinfo" hover-class="touchOpacity" @click="goGoodsdesc"
							:data-index="item.id">
							<text>{{item.goodsname}}</text>
							<text>现价格： ￥{{item.price}}</text>
							<text>原价格：￥{{item.market_price}}</text>
							<text>
								立即抢购
							</text>
						</view>
					</view>
				</view>
				<!-- #ifdef H5 -->
				<view class="topview"></view>
				<!-- #endif -->
			</view>
		</view>
		<!--引用组件  引入骨架屏组件-->
		<!--注意： 所以要求在请求数据尚未完成时，填写一些模拟数据，才能让对应的元素有对应的尺寸和位置，供uni.createSelectorQuery查询使用 -->
		<u-skeleton bg-color="rgb(250, 250, 250)" :loading="loading" :animation="animation"></u-skeleton>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref, getCurrentInstance } from 'vue';  
import { getBanner } from '../../common/api.js'
const { $baseUrl } = getCurrentInstance().appContext.config.globalProperties
// 创建响应式数据  
const catenav = reactive([  
    { catename: '关注' },  
    { catename: '推荐' },  
    { catename: '电影' },  
    { catename: '科技' },  
    { catename: '音乐' },  
    { catename: '美食' },  
    { catename: '文化' },  
    { catename: '财经' },  
    { catename: '手工' }  
]);
const currentnav = ref(0)  // 初始化分类导航下标
// 定义方法  
const changecurrent =(item)=> {  
    console.log('item', item);  
}  
// 使用 reactive 创建响应式数组  
const bannerlist = ref([]); 
const goActive = (index)=>{
	uni.navigateTo({
		url:'/pages/gooddesc/gooddesc?id=' + bannerlist.value[index].id
	})
}


const quicknav = reactive([
		{src:'../../static/icon/seckill.png',text:'限时秒杀'},
		{src:'../../static/icon/top.png',text:'畅销商品'},
		{src:'../../static/icon/brand.png',text:'品质大牌'},
		{src:'../../static/icon/selfsupport.png',text:'小U自营'},
		{src:'../../static/icon/integral.png',text:'积分商城'}
	]
)
const seckill = reactive({})//秒杀数据
const tuijianshop = reactive([
	'../../static/img/pic/commodity/01.png',
	'../../static/img/pic/commodity/02.png',
	'../../static/img/pic/commodity/03.png',
	'../../static/img/pic/commodity/04.png',
	'../../static/img/pic/commodity/05.png',
])
const shoplist = reactive([{'content':[]}])
const goodsIndex = ref(0)
const tjActiveIndex =  ref(0)
const bold = ref(true)
const current = ref(0)//热推默认选项卡
const activeColor = ref('orange') 
const mode = ref('subsection')
const currentChange = (index)=>{
	goodsIndex.value = index;
	current.value = index;
}

// 骨架屏
let loading = ref(false) // 是否显示骨架屏组件
let animation = ref(true)
onLoad(async ()=>{
	loading.value=true
	setTimeout(()=>{
		loading.value=false
	},2000)
	
	// uni.request({
	// 	url:'http://localhost:3000/api/getbanner',
	// 	success(res) {
	// 		console.log(res);
	// 	}
	// })
	// 幻灯片
	let res = await getBanner()
	// console.log(res.data.list);
	// 处理图片地址
	if(res.data.code == 200){
		res.data.list.map(item=>{
			item.img = $baseUrl + item.img
		})
		bannerlist.value = res.data.list
		// console.log(bannerlist.value);
	}else{
		uni.showToast({
			title:res.data.msg
		})
	}
	
	
})
</script>

<style>
	/* 引入样式 */
	@import url("@/static/css/index.css");
</style>